<template>
  <music-box title="网易云音乐"
             :show-left="false">

    <!-- 搜索框 -->
    <view class="search-box">
      <text class="icon iconfont iconsearch"></text>
      <input type="text"
             class="input"
             @click="toSearch"
             placeholder="请输入歌曲">
      </input>
    </view>

    <!-- 歌曲列表 -->
    <view class="music-list-box">
      <view class="music-list-item"
            @click="toList(item.id)"
            v-for="item in topList"
            :key="item.id">
        <!-- 歌曲分类图片 -->
        <view class="img-box">
          <image class="music-img"
                 mode="scaleToFill"
                 :src="item.coverImgUrl">
          </image>
          <view class="music-update">
            {{item.updateFrequency}}
          </view>
        </view>

        <!-- 歌曲列表 -->
        <view class="music-list">
          <view class="music"
                v-for="(music, index) in item.tracks"
                :key="music.first">
            {{index + 1 + '、' + music.first + '-' + music.second}}
          </view>
        </view>
      </view>
    </view>
  </music-box>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Hello',
        topList: []
      }
    },
    mounted() {
      this.getTopListInfo()
    },
    methods: {
      // 获取所有榜单内容摘要
      async getTopListInfo() {
        let res = await this.api.getTopListInfo()
        if (res.code !== 200)
          return uni.$showError('获取榜单失败')

        let list = res.list
        // 榜单只取前四个
        list.length = 4
        this.topList = list || []
      },

      /**
       * 跳转到list页面
       * @param {String | Number} id 排行榜id
       */
      toList(id) {
        uni.navigateTo({
          url: '/pages/musicList/musicList?id=' + id
        })
      },

      // 跳转到search页面
      toSearch() {
        uni.navigateTo({
          url: '/pages/search/search'
        })
      }
    }
  }
</script>

<style scoped
       lang="scss">
  .search-box {
    height: 70rpx;
    margin: 30rpx 15rpx 15rpx 15rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 35rpx;
    background-color: #f7f7f7;

    .icon {
      font-size: 30rpx;
      padding: 4rpx 20rpx 0 28rpx;
    }

    .input {
      font-size: 26rpx;
    }
  }

  .music-list-box {
    margin: 0 15rpx;

    .music-list-item {
      margin: 34rpx 0;
      display: flex;


      .img-box {
        width: 210rpx;
        height: 210rpx;
        margin-right: 42rpx;
        position: relative;
        border-radius: 15rpx;
        overflow: hidden;

        .music-img {
          width: 100%;
          height: 100%;
        }

        .music-update {
          position: absolute;
          left: 12rpx;
          bottom: 16rpx;
          color: #FFFFFF;
          font-size: 20rpx;
        }
      }

      .music-list {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .music {
          font-size: 24rpx;
        }
      }
    }
  }
</style>
